import React, { useState, useEffect } from 'react';
import { UserAuth } from '../../utils/hooks';
import NotAuth from '../../components/NotAuth';
import { Row, Col, Layout, message, Table, Button, Modal, Image } from 'antd';
import axios from 'axios';
import Config from '../../Config';

const { Content, Header } = Layout;
const ProcessManager = () => {
  const [tableLoading, SetTableLoading] = useState(false);
  const [Data, SetData] = useState([]);
  const [refresh, SetRefresh] = useState(false);
  const [ImgModal, SetImgModal] = useState(false);
  const [ImgId, SetImgId] = useState('');
  const columns = [
    {
      title: '流程编号',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '操作类型',
      dataIndex: 'type',
      key: 'type',
      filters: [
        { text: '录入', value: 1 },
        { text: '修改', value: 2 },
        { text: '删除', value: 3 },
      ],
      onFilter: (value, record) => record.type === value,
      render: (_, record) => {
        if (record.type == 1) {
          return <span>录入</span>;
        } else if (record.type == 2) {
          return <span>修改</span>;
        } else if (record.type == 3) {
          return <span>删除</span>;
        }
      },
    },
    {
      title: '流程名',
      dataIndex: 'processName',
      key: 'processName',
    },
    {
      title: '当前状态',
      dataIndex: 'state',
      key: 'state',
      render: (_, value) => {
        if (value.state == 1) {
          return <span style={{ color: '#00AF9B' }}>开启</span>;
        }
        return <span style={{ color: '#FFB800' }}>关闭</span>;
      },
    },
    {
      title: '操作',
      key: 'action',

      render: (_, value) => {
        let danger = false;
        if (value.state == 1) danger = true;
        return (
          <>
            <Button
              type="primary"
              danger={danger}
              onClick={() => {
                axios
                  .post(Config.baseURL + '/activiti/changeProcess', {
                    id: value.id,
                    type: value.type,
                  })
                  .then(res => {
                    let data = res.data;
                    if (data.code == 1) {
                      SetRefresh(!refresh);
                    }
                  })
                  .catch(err => {
                    message.error('修改失败', 2);
                    SetRefresh(!refresh);
                  });
              }}
            >
              {value.state == 1 ? '关闭' : '开启'}
            </Button>
            <Button
              type="primary"
              style={{ marginLeft: '20px' }}
              onClick={() => {
                SetImgId(Config.realUrl + 'activiti/process/' + value.processKey);
                SetImgModal(true);
              }}
            >
              查看进程流程图
            </Button>
          </>
        );
      },
    },
  ];
  useEffect(() => {
    SetTableLoading(true);
    axios
      .get(Config.baseURL + '/activiti/getProcess')
      .then(res => {
        let data = res.data;
        if (data.code == 1) {
          SetData(data.data.processMangerDOList);
          SetTableLoading(false);
        }
      })
      .catch(err => {
        console.log(err);
        SetTableLoading(false);
      });
  }, [refresh]);
  return (
    <>
      <Layout>
        <Header
          style={{
            borderRadius: '5px 5px 0px 0px',
            height: '40px',
            padding: '0px 15px',
            margin: '0px 0px',
            backgroundColor: 'white',
            textAlign: 'left',
            lineHeight: '40px',
          }}
        >
          <h3>审核流程</h3>
        </Header>
        <Content style={{ padding: '10px 20px', backgroundColor: 'white' }}>
          <Table
            style={{ border: '2px solid #E6F7FF', borderRadius: '2px' }}
            loading={tableLoading}
            columns={columns}
            dataSource={Data}
          ></Table>
        </Content>
      </Layout>
      <Modal
        title="流程图"
        visible={ImgModal}
        onCancel={() => {
          SetImgModal(false);
        }}
        footer={null}
        width={1500}
        style={{ top: 20 }}
      >
        <Row>
          <Col span={1}></Col>
          <Col span={22}>
            <Image src={ImgId}></Image>
          </Col>
          <Col span={1}></Col>
        </Row>
      </Modal>
    </>
  );
};
export default () => {
  const { authority } = UserAuth('ProcessManager');
  return <>{authority ? <ProcessManager /> : <NotAuth />}</>;
};
